<!DOCTYPE html>
<html>
<head>
    <title>Extensible : Calendar Within a TabPanel</title>
    <!-- Sets up all Ext and Extensible includes: -->
    <script type="text/javascript" src="../../Extensible-config.js"></script>
    
    <!-- Page-specific includes -->
    <script type="text/javascript" src="tabpanel.js"></script>
    <style>
        .sample-ct {      
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="sample-overview">
        <h1>Calendar Within a TabPanel</h1>
        <p>A simple example of a common layout style. This shows a CalendarPanel that is lazy-rendered inside a TabPanel.</p>
        
        <p class="view-src"><a target="_blank" href="tabpanel.js">View the source</a></p>
    </div>
    
    <div id="tabpanel" class="sample-ct"></div>
    
    <div style="display:none;">
        <div id="general-tab">
            <h1>General Info</h1>
            <p>Some general content. Click the Calendar tab to see a calendar!</p>
            <p>Note that if you inspect the generated page source right now you'll see that the CalendarPanel is not even rendered into the DOM until the tab is first shown.</p>
        </div>
    </div>
</body>
</html>